<template>
  <div>
    <a-row :gutter="24">
      <a-col :sm="24" :md="18" :xl="18" :lg="18">
        <div class="card toolli" style="margin-top: 10px" v-for="(v, k) in toollist" :key="k">
          <a-card :loading="loading" :bordered="false">
            <div class="flex row_bet col_center">
              <div class="flex row_bet col_center">
                <img :src="v.pic" alt="" style="width: 375px; height: 207px; margin-right: 35px; border-radius: 6px"/>
                <div class="toolinfo">
                  <div class="title">{{ v.title }}</div>
                  <div class="time">
                    <a-space
                    ><span>更新时间:{{ v.title }}</span> <span>最新版本：{{ v.version }}</span></a-space
                    >
                  </div>
                  <div class="line-6 desc">{{ v.desc }}</div>
                  <div class="log">
                    <a-space>
                      <span>[{{ v.time | dateFormat('YYYY-MM-DD') }}]</span>
                      <span>更新日志:{{ v.log }}</span>
                      <span class="cursor" style="color: blue" @click="getloginfo(v.id)">查看更多</span>
                    </a-space>
                  </div>
                </div>
              </div>
              <div class="downloadbox">
                <a :href="v.download_url" download="letuitool" class="adown">
                  <a-button>立即下载</a-button>
                </a>
              </div>
            </div>
          </a-card>
        </div>
      </a-col>
      <a-col :sm="24" :md="6" :xl="6" :lg="6">
        <div class="periphery">
          <div class="flex row_bet">
            <div></div>
            <div class="rightlog">
              <div class="">
                <div>更新概览</div>
                <div class="preview">
                  <div class="flex row_bet" v-for="(v, k) in overviewlist" :key="k">
                    <span style="color: #2396f9; width: 85px">[{{ v.time | dateFormat('YYYY-MM-DD') }}]</span>
                    <span style="color: #101010; width: 120px">{{ v.title }}</span>
                    <span style="color: #101010; width: 40px; text-align: right">{{ v.version }}</span>
                  </div>
                  <div class="pagination" style="width: 100%">
                    <a-pagination
                      size="small"
                      v-model="current"
                      :total="total"
                      :pageSize="17"
                      @change="pagesizechange"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="periphery">
      <a-modal
        v-model="timelineshow"
        :footer="null"
        :width="620"
        title="工具标题"
        :closable="true"
        :maskClosable="true"
        :centered="true"
        class="modal3"
        :bodyStyle="{
          padding: '13px',
        }"
      >
        <div class="timeline">
          <div v-for="(v, index) in logList" :key="index" class="pore">
            <div class="kli">
              <div style="width: 80px">{{ v.time }}</div>
              <div style="position: relative; min-height: 42px; flex: 1">
                <div class="line"></div>
                <div class="topround flex row_left col_top">
                  <div class="round hvr-glow" style="z-index: 999"></div>
                  <div class="knowtitle" v-html="v.log"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
  import { getloginfo, gettoollist, gettooloverview } from '@/api/toolApi'

  export default {
    name: 'Periphery',
    data () {
      return {
        timelineshow: false,
        toollist: [
          // {
          //   id: 1, // 工具id
          //   title: '测试', // 工具标题
          //   pic: 'https://detail.tmall.com/item.htm?id=608455384750', // 工具图片
          //   desc: '测试介绍', // 工具简介
          //   time: '2020-12-23 10:33:37', // 更新时间
          //   version: '2.2', // 更新版本
          //   log: '测试更新日志', // 更新日志
          //   download_url: 'http://www.baidu.com' // 下载地址
          // }
        ],
        overviewlist: [],
        total: 0,
        current: 1,
        logList: [],
        loading: false
      }
    },
    computed: {},
    created () {
      this.gettoollist()
      this.gettooloverview(1, 17)
    },
    mounted () {
    },
    methods: {
      getloginfo (id) {
        getloginfo({
          tool_id: id
        })
          .then((res) => {
            console.log(res)
            this.logList = res.data
            this.timelineshow = true
          })
          .catch((err) => {
            console.log(err)
          })
      },
      pagesizechange (page, pagesize) {
        console.log(page, pagesize)
        this.gettooloverview(page, 17)
      },
      gettooloverview (page, pagesize) {
        gettooloverview({
          page: page,
          pagesize: pagesize
        })
          .then((res) => {
            console.log(res)
            this.overviewlist = res.data.data
            this.total = res.data.count
            this.current = parseInt(res.data.page)
          })
          .catch((err) => {
            console.log(err)
          })
      },
      gettoollist () {
        gettoollist()
          .then((res) => {
            // console.log(res)
            this.toollist = res.data
          })
          .catch((err) => {
            console.log(err)
          })
      }
    }
  }
</script>
<style lang='less'>
  .modal3 {
    .timeline {
      width: 100%;
      height: 600px;
      padding: 18px;
      overflow-y: auto;

      .pore {
        overflow: hidden;

        .kli {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          .user {
            /*width: 30%;*/
            color: #96989b;
          }

          .line {
            width: 1px;
            height: 58px;
            top: 15px;
            left: 5px;
            z-index: 0;
            background-color: #f3f3f3;
          }

          .topround {
            z-index: 99;

            .round {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 1px solid #e7e7e7;
              margin-right: 15px;
              z-index: 999;
              margin-top: 4px;
            }

            .hvr-glow:hover,
            .hvr-glow:focus,
            .hvr-glow:active {
              box-shadow: 0 0 8px #2396f9;
            }

            .knowtitle {
              flex: 1;
            }
          }

          .botline {
          }
        }
      }

      .kli:hover {
        .knowtitle {
          color: #2396f9;
        }

        .topround {
          .round {
            background-color: #3c82fa;
            border: 1px solid #3c82fa;
            box-shadow: 0 0 8px #3c82fa;
          }
        }
      }

      /*.pore:last-child {*/
      /*  .line {*/
      /*    display: none;*/
      /*  }*/
      /*}*/
    }
  }
</style>
<style lang='less' scoped>
  .periphery {
    .toolli {
      width: 1313px;
      height: 251px;
      padding: 22px;
      margin-bottom: 18px;
      border-radius: 6px;

      .toolinfo {
        width: 398px;
        color: #101010;

        .title {
          font-size: 20px;
        }

        .time {
          font-size: 12px;
        }

        .desc {
          color: #bbbbbb;
          font-size: 13px;
          height: 121px;
        }

        .log {
        }
      }

      .downloadbox {
        position: relative;
        width: 100px;
        height: 207px;
        text-align: center;

        .adown {
          display: block;
          position: absolute;
          bottom: 0;
        }
      }
    }

    .rightlog {
      width: 100%;
      height: 410px;
      background-color: #fff;
      padding: 11px;
      border-radius: 6px;
      position: sticky;
      top: 0px;
      margin-top: 10px;

      .preview {
        position: relative;
        height: 368px;

        .pagination {
          width: 283px;
          position: absolute;
          bottom: 0;
          text-align: center;
        }
      }
    }
  }
</style>
